<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 100px;
                height: 50px;
                margin: 10px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
    <script>

        window.onload=function () {
          var aDivs = document.getElementsByTagName("div");
            for (let i = 0; i < aDivs.length; i++) {
                aDivs[i].timer=null;
                aDivs[i].onmouseover = function(){
                    startMove(this,400)
                };
                aDivs[i].onmouseout = function () {
                    startMove(this,100)
                }
            }
        };

        function startMove(oDiv,iTarget){
            clearInterval(oDiv.timer);
            oDiv.timer = setInterval(function () {
                var speed = (iTarget-oDiv.offsetWidth)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if (oDiv.offsetWidth===iTarget){
                    clearInterval(timer);
                } else{
                    oDiv.style.width = oDiv.offsetWidth+speed+"px";
                }
            },30);
        }
    </script>
</html>